<template>
  <div class="official">
    <!-- 顶部导航 -->
    <div class="nav-top">
      <div class="container">
        <div class="left">
          <img src="/src/assets/logo.png" alt="小米logo" style="height: 30px; margin-right: 40px;">
          <a href="/">小米官网</a>
          <span class="sep">|</span>
          <router-link to="/">小米商城</router-link>
          <span class="sep">|</span>
          <a href="#">MIUI</a>
          <span class="sep">|</span>
          <a href="#">IoT</a>
          <span class="sep">|</span>
          <a href="#">云服务</a>
          <span class="sep">|</span>
          <a href="#">天星数科</a>
          <span class="sep">|</span>
          <a href="#">有品</a>
          <span class="sep">|</span>
          <a href="#">小爱开放平台</a>
          <span class="sep">|</span>
          <a href="#">企业团购</a>
          <span class="sep">|</span>
          <a href="#">资质证照</a>
          <span class="sep">|</span>
          <a href="#">协议规则</a>
          <span class="sep">|</span>
          <a href="#">下载app</a>
        </div>
        <div class="right">
          <router-link to="/login">登录</router-link>
          <span class="sep">|</span>
          <router-link to="/register">注册</router-link>
        </div>
      </div>
    </div>

    <div class="content">
      
    </div>
  </div>
  <Footer />
</template>

<script setup>
import Footer from '../components/Footer.vue';
</script>

<style lang="scss" scoped>
.official {
  .nav-top {
    background-color: #333;
    height: 40px;
    color: #b0b0b0;
    
    .container {
      width: 1226px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      font-size: 12px;
      
      a {
        color: #b0b0b0;
        text-decoration: none;
        
        &:hover {
          color: #fff;
        }
      }
      
      .sep {
        margin: 0 .5em;
        color: #424242;
      }
      
      .left, .right {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style> 